<template>
  <div>
    <div :class="wrapClasses" @mouseleave="handleMouseLeave($event)">
      <div class="hidden-columns" ref="hiddenColumns">
        <slot></slot>
      </div>

      <div v-if="showHeader"
           v-mousewheel="handleHeaderFooterMousewheel"
           class="aty-table__header-wrapper"
           ref="headerWrapper">
        <table-header ref="tableHeader"
                      :store="store"
                      :border="border"
                      :default-sort="defaultSort"
                      :style="{
                        width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''
                      }" />
      </div>

      <div class="aty-table__body-wrapper"
           ref="bodyWrapper"
           :class="[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']"
           :style="[bodyHeight]">
        <table-body ref="tableBody"
                    :context="context"
                    :store="store"
                    :stripe="stripe"
                    :row-class-name="rowClassName"
                    :row-style="rowStyle"
                    :highlight="highlightCurrentRow"
                    :style="{
                      width: bodyWidth
                    }" />
        <div
          v-if="!pageableData || pageableData.length === 0 || (pageableData.data && pageableData.data.length === 0)"
          class="aty-table__empty-block"
          ref="emptyBlock"
          :style="{
            width: bodyWidth
          }">
          <span class="aty-table__empty-text">
            <slot name="empty">{{ emptyText || t('aty.table.emptyText') }}</slot>
          </span>
        </div>
        <div v-if="$slots.append"
             class="aty-table__append-wrapper"
             ref="appendWrapper">
          <slot name="append"></slot>
        </div>
      </div>

      <div v-if="showSummary"
           v-show="data && data.length > 0"
           v-mousewheel="handleHeaderFooterMousewheel"
           class="aty-table__footer-wrapper"
           ref="footerWrapper">
        <table-footer :store="store"
                      :border="border"
                      :sum-text="sumText || t('i.table.sumText')"
                      :summary-method="summaryMethod"
                      :style="{
                        width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''
                      }" />
      </div>

      <div v-if="fixedColumns.length > 0"
           v-mousewheel="handleFixedMousewheel"
           class="aty-table__fixed"
           ref="fixedWrapper"
           :style="[{
                      width: layout.fixedWidth ? layout.fixedWidth + 'px' : ''
                    },
                    fixedHeight]">
        <div
          v-if="showHeader"
          class="aty-table__fixed-header-wrapper"
          ref="fixedHeaderWrapper">
          <table-header ref="fixedTableHeader"
                        fixed="left"
                        :border="border"
                        :store="store"
                        :style="{
                          width: fixedBodyWidth
                        }" />
        </div>
        <div class="aty-table__fixed-body-wrapper"
             ref="fixedBodyWrapper"
             :style="[{
                        top: layout.headerHeight + 'px'
                      },
                      fixedBodyHeight]">
          <table-body ref="fixedTableBody"
                      fixed="left"
                      :store="store"
                      :stripe="stripe"
                      :highlight="highlightCurrentRow"
                      :row-class-name="rowClassName"
                      :row-style="rowStyle"
                      :style="{
                        width: fixedBodyWidth }" />
          <div v-if="$slots.append"
               class="aty-table__append-gutter"
               :style="{
                 height: layout.appendHeight + 'px'
               }"></div>
        </div>
        <div v-if="showSummary"
             v-show="data && data.length > 0"
             class="aty-table__fixed-footer-wrapper"
             ref="fixedFooterWrapper">
          <table-footer fixed="left"
                        :border="border"
                        :sum-text="sumText || t('aty.table.sumText')"
                        :summary-method="summaryMethod"
                        :store="store"
                        :style="{
                          width: fixedBodyWidth
                        }" />
        </div>
      </div>

      <div v-if="rightFixedColumns.length > 0"
           v-mousewheel="handleFixedMousewheel"
           class="aty-table__fixed-right"
           ref="rightFixedWrapper"
           :style="[{
                      width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',
                      right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 0)) + 'px' : ''
                    },
                    fixedHeight]">
        <div v-if="showHeader"
             class="aty-table__fixed-header-wrapper"
             ref="rightFixedHeaderWrapper">
          <table-header
            ref="rightFixedTableHeader"
            fixed="right"
            :border="border"
            :store="store"
            :style="{
              width: rightFixedBodyWidth
            }" />
        </div>
        <div class="aty-table__fixed-body-wrapper"
             ref="rightFixedBodyWrapper"
             :style="[{
                        top: layout.headerHeight + 'px'
                      },
                      fixedBodyHeight]">
          <table-body ref="rightFixedTableBody"
            fixed="right"
            :store="store"
            :stripe="stripe"
            :row-class-name="rowClassName"
            :row-style="rowStyle"
            :highlight="highlightCurrentRow"
            :style="{
              width: rightFixedBodyWidth
            }" />
        </div>
        <div v-if="showSummary"
             v-show="data && data.length > 0"
             class="aty-table__fixed-footer-wrapper"
             ref="rightFixedFooterWrapper">
          <table-footer
            fixed="right"
            :border="border"
            :sum-text="sumText || t('i.table.sumText')"
            :summary-method="summaryMethod"
            :store="store"
            :style="{
              width: rightFixedBodyWidth
            }" />
        </div>
      </div>

      <div v-if="rightFixedColumns.length > 0"
           class="aty-table__fixed-right-patch"
           ref="rightFixedPatch"
           :style="{
             width: layout.scrollY ? layout.gutterWidth + 'px' : '0',
             height: layout.headerHeight + 'px'
           }">
      </div>

      <div class="aty-table__column-resize-proxy" ref="resizeProxy" v-show="resizeProxyVisible"></div>
    </div>
    <AtyPagination ref="tablePagination" v-if="isSplitPage && !Array.isArray(pageableData)" :offset="offset" :total="total"
                   :limit="limit" :limit-opts="limitOpts" :transfer="limitOptsTransfer" placement="bottom"
                   :size="pagebarSize" :simple="pagebarSimple" :showTotal="showTotal" :showElevator="showElevator"
                   :showSizer="showSizer" :className="pagebarClassName" :showOnePage="showPagebarOnePage"
                   :expAll="expAll" :maxDataCount="maxDataCount" :expCurrentPage="expCurrentPage"
                   @change="handlePageChange" @exportdata="handleExportData" />
    <div v-if="expCurrentPage || expAll">
      <aty-circle-progress :percent="expProgressPercent" :showMask="true" :style="{display: expProgressDisplay}" v-if="showExpProgress" />
    </div>
  </div>

</template>
<script src="./index.js"></script>
